<template>
  <div class="report">
    <title-vue><span>举报记录</span></title-vue>
    <div class="report_nav">
      <a href="JavaScript:;" @click="toTopics" :class="{active:isFlag}">
        <span>话题</span>
        <span>({{topicsData.length}})</span>
      </a>
      <a href="JavaScript:;" @click="toComment" :class="{active:!isFlag}">
        <span>评论</span>
        <span>({{commentsData.length}})</span>
      </a>
    </div>
    <div class="content">
      <report-topics v-show="isFlag" :topicsData="topicsData"></report-topics>
      <report-comment v-show="!isFlag"  :commentsData="commentsData"></report-comment>
    </div>
  </div>
</template>

<script>
import titleVue from "../title.vue"
import tool from "../../../../assets/js/tool"
import reportTopics from "./reportTopics.vue"
import reportComment from "./reportComment.vue"
export default {
  name: 'Report',

  data() {
    return {
      topicsData: [], // 所有话题举报数据
      commentsData: [], // 所有评论举报数据
      isFlag: true, // 话题/评论 切换
    }
  },

  computed: {
    timer(){
      return (time) => tool.GetTimer(time)
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      if(this.$route.query.title == '评论'){
        this.isFlag = false
      }
      this.$api.getReportData().then(res => {
        this.topicsData = res.topics
        this.commentsData = res.comments
      })
    },
    // 显示话题
    toTopics(){
      this.isFlag = true
      this.$router.push({
        path: '/Admin/home/report',
        query: {
          index: 2,
          title: '话题'
        }
      })
    },
    // 显示评论
    toComment(){
      this.isFlag = false
      this.$router.push({
        path: '/Admin/home/report',
        query: {
          index: 2,
          title: '评论'
        }
      })
    }
  },

  components: {
    titleVue,
    reportComment,
    reportTopics
}
};
</script>

<style scoped>
.report{
  width: 100%;
  padding: 20px;
}
.topics,.comments{
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
  margin: 20px 0;
}
.content{
  margin-top: 20px;
}
.report_nav{
  margin-top: 10px;
}
.report_nav a{
  display: inline-block;
  border: 1px solid gray;
  font-size: 0.8rem;
  padding: 4px;
  position: relative;
  margin-right: 20px;
}
.report_nav .active{
  background-color: green;
  color: white;
}
.paging button{
  border: 1px solid gray;
  padding: 2px;
  cursor: pointer;
}
.paging span{
  border: none;
}
</style>